<template>
  <div class="add-deposit">
    <a-form
      :model="formState"
      ref="formDataRef"
      name="basic"
      :label-col="{ style: 'width:90px' }"
      :wrapper-col="{ style: 'calc(100% - 90px)' }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <div class="box-info">
        <div class="title">来款信息</div>
        <a-row>
          <a-col :span="12">
            <a-form-item label="经营单位" name="deptId" :rules="[{ required: true, message: '请选择经营单位!' }]">
              <a-select :disabled="type === 3" v-model:value="formState.deptId" placeholder="请选择" :filter-option="filterOption" show-search :options="companyOpts"> </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="付款方名称" name="payerName" :rules="[{ required: false, message: '请填写付款方名称!' }]">
              <a-input :disabled="type === 3" v-model:value="formState.payerName" :maxlength="20" placeholder="请输入"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="客户名称" name="customerId" :rules="[{ required: true, message: '请选择客户名称!' }]">
              <a-select :disabled="type === 3" v-model:value="formState.customerId" placeholder="请选择" :filter-option="filterOption" show-search :options="customerOpts" @change="changeCompany">
                <!-- <a-select-option v-for="item in customerOpts" :key="item.value" :value="item.value">{{ item.label }}</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="来款金额" name="depositPrice" :rules="[{ required: true, message: '请填写来款金额!' }]">
              <a-input-number :disabled="type === 3" v-model:value="formState.depositPrice" :min="0.01" :max="9999999.99" placeholder="请输入"></a-input-number>
            </a-form-item>
          </a-col>

          <!-- <a-col :span="12">
            <a-form-item label="订单号" name="orderNum" :rules="[{ required: false, message: '请填写订单号!' }]">
              <a-input :disabled="type === 3" v-model:value="formState.orderNum" @keyup="validateZhInputHandle($event, formState, ['orderNum'])" :maxlength="25" placeholder="请输入"></a-input>
            </a-form-item>
          </a-col> -->

          <a-col :span="12">
            <a-form-item label="来款时间" name="proceedsTime" :rules="[{ required: true, message: '请选择来款时间!' }]">
              <a-date-picker :disabled="type === 3" v-model:value="formState.proceedsTime" show-time placeholder="请选择" />
            </a-form-item>
          </a-col>

          <!-- <a-col :span="12">
            <a-form-item label="收款账户" name="accountId" :rules="[{ required: false, message: '请选择收款账户!' }]">
              <a-select :disabled="type === 3" v-model:value="formState.accountId" :fieldNames="{ label: 'name', value: 'id' }" :options="accountOpts" :show-search="{ filter }" placeholder="请选择" />
            </a-form-item>
          </a-col> -->

          <a-col :span="12">
            <a-form-item label="来款备注" name="remark" :rules="[{ required: false, message: '请填写来款备注!' }]">
              <a-textarea :disabled="type === 3" v-model:value="formState.remark" placeholder="请输入" show-count :maxlength="300" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="来款图片" name="image" :rules="[{ required: true, message: '请上传图片!' }]">
              <CustomerUploadFile mode="/parent/" :disabled="type === 3" :canPast="true" :multiple="false" v-model:value="formState.image" valueType="1" :maxCount="1" list-type="picture-card">
                <plus-outlined></plus-outlined>
              </CustomerUploadFile>
              <span>只能上传PNG,JPG,JEPG,GIF文件</span>
            </a-form-item>
          </a-col>
          <div class="operation-wrapper">
            <a-button :loading="loading" type="primary" html-type="submit" v-if="type !== 3">提 交</a-button>
            <a-button @click="resetHandle">取 消</a-button>
          </div>
        </a-row>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: DepositRegister.ListRows;
    type: number; // 1 新增  2 编辑  3 查看
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading, customerOpts, getAllCustomer, accountOpts, companyOpts } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle, filterOption, changeCompany, getCompanyAndAccount } = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  loading,
  type,
  accountOpts,
  companyOpts
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);

const init = () => {
  if (type.value !== 1) {
    getCompanyAndAccount(passData.value.id);
    Object.assign(formState, passData.value);
    formState.proceedsTime = dayjs(Number(passData.value.proceedsTime)) as any;
    formState.image = passData.value.image ? passData.value.image.split(",") : [];
    formState.accountId = passData.value.accountId as string;
  }
  getAllCustomer();
  // getAccountOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-deposit {
  padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 16px;
        padding: 12px;
    }
    .box-info{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .title{
            display: flex;
            flex-direction:column;
            .title-Inner-div{
              display:flex;
              justify-content:space-between;
              align-items:center
            }
        }
        .table-content{
          padding: 0 12px 12px 12px;
        }
    }


    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }
}


:deep(.ant-input-number),:deep(.ant-picker){
    width: 100%;
}
</style>
